<template>
    <div>
        <el-card class="box-card" style="margin-top: 10px;">
            <div class="search">
              <!-- 折叠表头 -->
              <el-card>
                <el-collapse>
                  <el-collapse-item name="1">
                    <template slot="title">
                      <i class="el-icon-search"/>&nbsp;车辆信息查询
                    </template>
                    <!-- 客户信息查询 -->
                    <el-form
                      :inline="true"
                      label-width="100px"
                      class="padding-bottom15">
                      <el-row>
                        <el-col :span="6">
                          <el-form-item label="车牌号">
                            <el-input v-model="number" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="车龄">
                            <el-input v-model="age" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="车长(米)">
                            <el-input v-model="carLength" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="载重(吨)">
                            <el-input v-model="nload" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="车型">
                            <el-select
                              size="small"
                              v-model="type"
                              placeholder="请选择车型">
                              <el-option label="高栏货车" value="高栏货车" />
                              <el-option label="低栏货车" value="低栏货车" />
                              <el-option label="厢式货车" value="厢式货车" />
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="发动机号码">
                            <el-input v-model="engineNo" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="车辆所有人">
                            <el-input v-model="people" size="small"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-button
                            size="small"
                            type="primary"
                            icon="el-icon-search"
                            style="margin-left: 25px;"
                            @click="load()">查询</el-button>
                          <el-button
                            size="small"
                            type="infor"
                            icon="el-icon-refresh"
                            style="margin-left: 10px;"
                            @click="reset()">重置</el-button>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-collapse-item>
                </el-collapse>
              </el-card>
            </div>
            <div style="margin-top: 10px;">
                <el-dialog
                  title="绑定的司机信息"
                  :visible.sync="dialogVisible"
                  width="70%"
                  :before-close="handleClose">
                  <el-descriptions title="司机的基础信息" direction="vertical" :column="10" border>
                      <template v-for="(item, index) in form">
                          <el-descriptions-item label="司机姓名" :key="index">{{ item.name }}</el-descriptions-item>
                          <el-descriptions-item label="性别" :key="index">{{ item.sex == 0 ? '男' : '女' }}</el-descriptions-item>
                          <el-descriptions-item label="年龄" :key="index">{{ item.age }}</el-descriptions-item>
                          <el-descriptions-item label="邮箱" :key="index">{{ item.email }}</el-descriptions-item>
                          <el-descriptions-item label="身份证号" :key="index">{{ item.idNumber }}</el-descriptions-item>
                          <el-descriptions-item label="联系方式" :key="index">{{ item.phone }}</el-descriptions-item>
                          <el-descriptions-item label="初次领取驾照时间" :key="index">{{ item.firstTime }}</el-descriptions-item>
                          <el-descriptions-item label="驾驶证到期时间" :key="index">{{ item.exp }}</el-descriptions-item>
                          <el-descriptions-item label="证件类型" :key="index">{{ item.type }}</el-descriptions-item>
                          <el-descriptions-item label="驾龄是否三年" :key="index">{{ item.isSatisfy }}</el-descriptions-item>
                      </template>
                  </el-descriptions>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                  title="修改司机信息"
                  :visible.sync="dialogVisible2"
                  width="60%"
                  :before-close="handleClose2">
                  <el-form :model="driverForm" label-width="120px" :inline="true">
                    <el-form-item label="车牌号">
                      <el-input v-model="driverForm.number"></el-input>
                    </el-form-item>
                    <el-form-item label="车龄">
                      <el-input v-model="driverForm.age"></el-input>
                    </el-form-item>
                    <el-form-item label="车长(米)">
                      <el-input v-model="driverForm.carLength"></el-input>
                    </el-form-item>
                    <el-form-item label="载重(吨)">
                      <el-input v-model="driverForm.load"></el-input>
                    </el-form-item>
                    <el-form-item label="车型">
                      <el-select v-model="driverForm.type" placeholder="车辆类型">
                        <el-option label="高栏货车" value="高栏货车" />
                        <el-option label="低栏货车" value="低栏货车" />
                        <el-option label="厢式货车" value="厢式货车" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="发动机号码">
                      <el-input v-model="driverForm.engineNo"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆所有人">
                      <el-input v-model="driverForm.people"></el-input>
                    </el-form-item>
                    <el-form-item label="车辆注册日期" style="margin-right: 23%;">
                      <el-date-picker
                        v-model="driverForm.creationTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                      />
                    </el-form-item>
                    <el-form-item style="margin-left: 8%;">
                        <div style="float: left;margin-left: 18%;">
                            <span>车辆正面照片</span>
                            <el-upload
                              class="avatar-uploader"
                              action="#"
                              :show-file-list="false"
                              :http-request="requestUpload"
                              :before-upload="beforeAvatarUpload1">
                              <img v-if="driverForm.imgUrl1" :src="driverForm.imgUrl1" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin-left: 8%;">
                        <div style="float: left;margin-left: 18%;">
                            <span>车辆反面照片</span>
                            <el-upload
                              class="avatar-uploader"
                              action="#"
                              :show-file-list="false"
                              :http-request="requestUpload"
                              :before-upload="beforeAvatarUpload2">
                              <img v-if="driverForm.imgUrl2" :src="driverForm.imgUrl2" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item style="margin-left: 8%;">
                        <div style="float: left;margin-left: 18%;">
                            <span>交强险照片</span>
                            <el-upload
                              class="avatar-uploader"
                              action="#"
                              :show-file-list="false"
                              :http-request="requestUpload"
                              :before-upload="beforeAvatarUpload3">
                              <img v-if="driverForm.imgUrl3" :src="driverForm.imgUrl3" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="save()">确 定</el-button>
                  </span>
                </el-dialog>
                <el-table
                    :row-style="{height: '0'}"
                    :cell-style="{padding: '5px'}"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column
                      fixed
                      width="180"
                      prop="number"
                      label="车牌号">
                    </el-table-column>
                    <el-table-column
                      width="100"
                      prop="age"
                      label="车龄">
                    </el-table-column>
                    <el-table-column
                      width="100"
                      prop="carLength"
                      label="车长(米)">
                    </el-table-column>
                    <el-table-column
                      width="100"
                      prop="load"
                      label="载重(吨)">
                    </el-table-column>
                    <el-table-column
                      width="150"
                      prop="type"
                      label="车型">
                    </el-table-column>
                    <el-table-column
                      width="200"
                      label="车辆正面照片">
                      <template slot-scope="scope">
                         <el-image
                               class="imgStyle"
                               :src="scope.row.imgUrl1"
                               :preview-src-list="[scope.row.imgUrl1]">
                         </el-image> 
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      label="车辆反面照片">
                      <template slot-scope="scope">
                         <el-image
                               class="imgStyle"
                               :src="scope.row.imgUrl2"
                               :preview-src-list="[scope.row.imgUrl2]">
                         </el-image> 
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      label="交强险照片">
                      <template slot-scope="scope">
                         <el-image
                               class="imgStyle"
                               :src="scope.row.imgUrl3"
                               :preview-src-list="[scope.row.imgUrl3]">
                         </el-image> 
                      </template>
                    </el-table-column>
                    <el-table-column
                      width="200"
                      prop="engineNo"
                      label="发动机号码">
                    </el-table-column>
                    <el-table-column
                      prop="people"
                      width="150"
                      label="车辆所有人">
                    </el-table-column>
                    <el-table-column
                      width="200"
                      prop="creationTime"
                      label="车辆注册日期">
                    </el-table-column>
                    <el-table-column
                      width="120"
                      label="车辆状态">
                      <template slot-scope="scope">
                          <el-tag effect="dark" v-show="scope.row.status == 0" type="success">
                            空闲
                          </el-tag>
                          <el-tag effect="dark" v-show="scope.row.status == 1">
                            使用中
                          </el-tag>
                          <el-tag effect="dark" v-show="scope.row.status == 2" type="warning">
                            待年审
                          </el-tag>
                          <el-tag effect="dark" v-show="scope.row.status == 3" type="danger">
                            待修理
                          </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      width="200"
                      prop="name"
                      label="操作">
                      <template slot-scope="scope">
                          <el-button type="text" icon="el-icon-view" @click="show(scope.row.id)">查看</el-button>
                          <el-button type="text" icon="el-icon-edit" style="color: #E6A23C;" @click="update(scope.row)">修改</el-button>
                          <el-button type="text" icon="el-icon-delete" style="color: red;" @click="del(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination
                    style="margin-top: 10px;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[2, 5, 10, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                  </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    import request from '../../utils/request.js'
    import axios from 'axios'
    export default {
        methods: {
           requestUpload() {
           },
           handleSizeChange(val) {
                this.size = val;
                this.load();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.load();
            },
            handleClose() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible = false;
              })
            },
            handleClose2() {
              this.$confirm('确认关闭？')
              .then(() => {
                  this.dialogVisible2 = false;
              })
            },
            load() {
                request.get("/car/getCarByPageAndCondition?current=" + this.current + "&size=" + this.size +
                 "&name=" + this.name + "&number=" + this.number + "&age=" + this.age + "&carLength=" + this.carLength + "&load=" + this.nload + "&type=" + this.type + "&engineNo=" + this.engineNo + "&people=" + this.people).then(res=>{
                    this.tableData = res.data.records;
                    this.total = res.data.total;                            
                })
            },
            reset() {
                this.number = '';
                this.age = '';
                this.type = '';
                this.carLength = '';
                this.nload = '';
                this.engineNo = '';
                this.people = '';
                this.load();
            },
            show(id) {
                this.dialogVisible = true;
                request.get("/car/getCarDriver?id=" + id).then(res=>{
                    this.form = res.data;                           
                })
            },
            update(val) {
               this.driverForm = val;
               this.dialogVisible2 = true;
            },
            save() {
                if (this.file1 === undefined && this.file2 === undefined && this.file3 === undefined) {
                   request.post("/car/updateCar", this.driverForm).then(res=>{
                     if (res.code === 200) {
                         this.$message({
                           type: 'success',
                           message: '修改成功!'
                         });
                         this.dialogVisible2 = false;
                         this.load();
                     } else {
                         this.$message.error("修改失败");
                     }
                   })
                } else {
                    let formData = new FormData();
                    formData.append("cars", JSON.stringify(this.driverForm));
                    if (this.file1 !== undefined) {
                        formData.append("file[]", this.file1);
                    }
                    if (this.file2 !== undefined) {
                        formData.append("file[]", this.file2);
                    }
                    if (this.file3 !== undefined) {
                        formData.append("file[]", this.file3);
                    }
                    axios({
                        url: "http://localhost:9090/car/updateCarAndInformation",
                        method: "POST",
                        data: formData,
                        headers: {
                            "Content-Type": "multipart/form-data",
                        },
                    })
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                              message: '车辆信息修改成功',
                              type: 'success'
                            });
                            this.load();
                            this.dialogVisible2 = false;
                        } else {
                            this.$message.error('车辆信息修改失败');
                        }
                    })
                    .catch((e) => {
                        this.$message.error(e)
                    });
                }
            },
            del(val) {
                if (val.people != "公司") {
                    this.$message.warning("非公司车辆不能直接删除");
                } else {
                    this.$confirm('此操作将永久删除该车辆的所有信息, 是否继续?', '提示', {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning'
                    }).then(() => {
                        request.delete("/car/deleteCar?id=" + val.id).then(res=>{
                          if (res.code === 200) {
                              this.$message({
                                type: 'success',
                                message: '删除成功!'
                              });
                               // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
                              const totalPage = Math.ceil((this.total- 1) / this.size); // 总页数
                              this.current = this.current > totalPage ? totalPage : this.current;
                              this.current = this.current < 1 ? 1 : this.current;
                              this.load();
                          }  
                        })
                        
                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });          
                    });   
                }
            },
            beforeAvatarUpload1(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.driverForm.imgUrl1 = reader.result
                    }
                    this.file1 = file
                }
            },
            beforeAvatarUpload2(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.driverForm.imgUrl2 = reader.result
                    }
                    this.file2 = file
                }
            },
            beforeAvatarUpload3(file) {
                if (file.type.indexOf("image/") === -1) {
                    this.modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
                } else {
                    const reader = new FileReader()
                    reader.readAsDataURL(file)
                    reader.onload = () => {
                        this.driverForm.imgUrl3 = reader.result
                    }
                    this.file3 = file
                }
            }
        },
        mounted() {
          this.load();  
        },
        data() {
          return {
            tableData: [],
            current:1,
            size:2,
            total:0,
            number:'',
            age:'',
            type:'',
            carLength:'',
            nload:'',
            engineNo:'',
            people:'',
            dialogVisible:false,
            dialogVisible2:false,
            form:{},
            driverForm:{},
            file1:undefined,
            file2:undefined,
            file3:undefined
          }
        }
      }
</script>

<style scoped>
    .imgStyle {
        width: 90px;
        height: 120px;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
